<!--
  桌面图标组件
  @author 邵鹏坤 2022年9月19日
  参考window11 桌面图标
  1 UI：
    1.1 容器大小： 沾满整个屏幕除任务栏以外的空间
    1.2 桌面图标：默认从左到右，从上到小排列，暂不支持图标拖拽和自定义排列方向
    1.3 桌面壁纸
    1.4 为了更好适配窗口最大化区域问题，所以在此处整合弹框
  2 数据源：
    桌面图标：
      将接收到的导航列表转化成上述桌面图标的排列方式，详情见下面parseAliveBar方法
  3 交互：
    图标双击事件：
      3.1 未激活当前导航的情况：
        带着被点击的导航 通知vuex，激活当前导航
      3.2 已激活当前导航的情况：
        3.2.1 处于最小化，则关闭最小化，恢复到最小化之前的状态，并获取焦点
        3.2.2 处于非最小化（最大化 || 窗口化）的状态，则切换zindex，让该导航处于最上级，并获取焦点
        3.2.3 处于最上级，如果没有焦点，则获取焦点
-->
<template>
  <div class="navBarContainer">
    <div class="navBarColumn" v-for="column in aliveBarColumns">
      <div v-for="item in column" :class="item.aliveFlag ? 'navBar hoverBar' : 'navBar'" @dblclick="clickCB(item)">
        <div class="navBarLogo">
          <Icon :iconClass="item.icon"></Icon>
        </div>
        <div class="navBarName">
          <span>
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
    <!-- 弹框显示 -->
    <TransitionGroup name="maxOrMIn">
      <diaLog v-for="aliveDialog in aliveDialogList" :key="aliveDialog.id" :id="aliveDialog.id"></diaLog>
    </TransitionGroup>
  </div>
</template>
<script setup lang="ts">
  import { defineProps, ref, onMounted } from 'vue'
  import { useStore } from 'vuex'
  import diaLog from '@/views/diaLog/diaLog.vue'
  import Icon from '@/views/icon/Icon.vue'
  import { SMALLSREEN } from '@/assets/js/dialogStatus'
  const store = useStore()
  interface aliveBarType {
    icon: string
    route: string
    name: string
    aliveFlag?: boolean
  }
  // 接收yi激活的
  const props = defineProps<{
    aliveBar: aliveBarType[]
  }>()
  const aliveBarColumns = ref<aliveBarType[][]>([])
  const aliveDialogList = ref()
  onMounted(() => {
    aliveDialogList.value = store.getters.getAliveBarList
    parseAliveBar()
    if (props.aliveBar && props.aliveBar.length >= 0) {
      props.aliveBar.forEach((item, index) => {
        item.aliveFlag = false
      })
    }
  })
  const parseAliveBar = () => {
    if (props.aliveBar.length <= 10) {
      aliveBarColumns.value.push(props.aliveBar)
    } else {
      let index = 0
      while (props.aliveBar.length > index) {
        if (props.aliveBar.length <= index) {
          return aliveBarColumns.value.push(props.aliveBar.slice(index, props.aliveBar.length - index))
        } else {
          aliveBarColumns.value.push(props.aliveBar.slice(index, index + 9))
          index += 10
        }
      }
    }
  }
  /**
   * 导航的点击事件
   * 用于激活弹框
   * @param item 点击的当前导航
   */
  const clickCB = (aliveBar: aliveBarType) => {
    // 先进行判断当前导航页面是否激活
    let findResult = store.getters.getAliveBarList.find((item: any) => {
      return item.route === aliveBar.route
    })
    if (findResult) {
      // 弹框已激活
      if (findResult.status === SMALLSREEN) {
        // 1：如果处于最小化，则变成最大化/窗口化
        // findResult.status = findResult.statusHistory
        store.commit('resetStatus', findResult)
        store.commit('setIsToSmall', true)
      } else {
        // 2: 没有最小化，则将该弹框覆盖其他所有弹框
        store.commit('setBigZIndex', { route: aliveBar.route })
      }
    } else {
      // 弹框未激活
      store.commit('addaliveBar', aliveBar)
      // router.push('/deskTop' + aliveBar.route)
    }
  }
</script>

<style lang="scss" scoped>
  .navBarContainer {
    width: 100%;
    flex-grow: 1;
    // background-color: greenyellow;
    display: flex;
    flex-direction: row;
    justify-content: left;
    position: relative;
    .navBarColumn {
      width: 4%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: left;
      align-items: center;
      margin: 0 0.2%;

      .navBar {
        margin: 0.5vh 0.5vw;
        width: 100%;
        @media screen and (min-width: 1600px) {
          height: 8vh;
        }

        @media screen and (max-width: 1600px) {
          height: 9.4vh;
        }

        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        transition: 0.3s;
        border-radius: 40%;
        border: solid;
        border-width: 0;
        background-color: rgba(255, 255, 255, 0);

        .navBarLogo {
          height: calc(100% - 20px);
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          @media screen and (min-width: 1600px) {
            font-size: 55px;
          }

          @media screen and (min-width: 1023px) and (max-width: 1600px) {
            font-size: 40px;
          }

          @media screen and (max-width: 1023px) {
            font-size: 25px;
          }
        }

        .navBarName {
          @media screen and (min-width: 1600px) {
            font-size: 14px;
          }

          @media screen and (min-width: 1023px) and (max-width: 1600px) {
            font-size: 12px;
          }

          @media screen and (max-width: 1023px) {
            font-size: 8px;
          }

          color: #fff;
        }
      }

      .navBar:hover {
        background-color: $theme-color-alive;
        border-radius: 10%;
      }

      .hoverBar {
        background-color: $theme-color-alive;
        border-radius: 10%;
      }
    }
  }

  .maxOrMIn-enter-active {
    transition: all 0.3s;
    // position: fixed;
  }

  .maxOrMIn-leave-active {
    transition: all 0.5s;
    // position: fixed;
  }

  .maxOrMIn-enter-from,
  .maxOrMIn-leave-to {
    // position: fixed;
    // top: 74vh;
    // left: 34vw;
    transform: scale(0.2) translateY(100%);
    opacity: 0;
  }
</style>
